<!DOCTYPE html>
<html lang="zh-CN">
	<!-- 教室系统登录页面 -->

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
		<!-- <script src="https://cdn.jsdelivr.net/npm/js-cookie@3.0.1/dist/js-cookie.min.js"></script> -->
		<title>教师登录系统</title>
		<style>
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}

			body {
				font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
				background-color: #f5f5f5;
				min-height: 100vh;
				display: flex;
				flex-direction: column;
				align-items: center;
				padding-top: 80px;
			}

			.main-title {
				font-size: 28px;
				color: #333;
				margin-bottom: 40px;
				font-weight: 500;
				display: flex;
				align-items: center;
				gap: 12px;
			}

			.main-title img {
				width: 40px;
				height: 40px;
			}

			.login-container {
				width: 100%;
				max-width: 400px;
				padding: 40px;
				background: #fff;
				border-radius: 8px;
				box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
			}

			.form-title {
				font-size: 20px;
				color: #333;
				margin-bottom: 30px;
				text-align: center;
			}

			.form-group {
				margin-bottom: 20px;
			}

			.form-group label {
				display: block;
				margin-bottom: 8px;
				color: #333;
				font-size: 14px;
			}

			.input-wrapper {
				position: relative;
			}

			.input-wrapper input {
				width: 100%;
				padding: 12px;
				border: 1px solid #ddd;
				border-radius: 4px;
				font-size: 14px;
				transition: all 0.3s;
			}

			.input-wrapper input:focus {
				border-color: #000;
				outline: none;
			}

			.remember-me {
				display: flex;
				align-items: center;
				gap: 8px;
				margin-bottom: 20px;
			}

			.remember-me input[type="checkbox"] {
				width: 16px;
				height: 16px;
			}

			.remember-me label {
				font-size: 14px;
				color: #666;
			}

			.login-btn {
				width: 100%;
				background: #000;
				color: #fff;
				border: none;
				padding: 12px;
				border-radius: 4px;
				font-size: 16px;
				cursor: pointer;
				transition: background 0.3s;
			}

			.login-btn:hover {
				background: #333;
			}

			.footer {
				display: flex;
				justify-content: space-between;
				margin-top: 20px;
			}

			.footer a {
				font-size: 14px;
				color: #666;
				text-decoration: none;
			}

			.footer a:hover {
				color: #000;
			}
		</style>
	</head>

	<body>
		<h1 class="main-title">
			<img src="img/logo.png" alt="Logo">
			教师登录系统
		</h1>

		<div class="login-container">
			<h2 class="form-title">账号登录</h2>
			<form class="login-form">
				<div class="form-group">
					<label>工号</label>
					<div class="input-wrapper">
						<input type="text" placeholder="请输入工号">
					</div>
				</div>

				<div class="form-group">
					<label>密码</label>
					<div class="input-wrapper">
						<input type="password" placeholder="请输入密码">
					</div>
				</div>

				

				<button type="submit" class="login-btn">登录</button>

				<div class="footer">
					
					<a href="index.html">返回首页</a>
				</div>
			</form>
		</div>


		<script src="js/thearlogin.js"></script>
		<script>
			
		</script>
	</body>

</html>